<template>
    <div class="address-page">
        <!-- Header组件 -->
        <Header>
            <template v-slot:left>
                <span @click="$router.go(-1)">&lt;</span>
            </template>
            <template v-slot:middle>
                我的收货地址
            </template>
        </Header>

        <!-- 地址列表 -->
        <div class="list">
            <div class="item" v-for="(item,index) in addressList" :key="index">
                <div class="text">
                    <div class="address">{{item.address}}</div>
                    <div>{{item.name}} {{item.phone}}</div>
                </div>
                <router-link class="ope" :to="{name:'edit',params:{ item }}">
                    编辑
                </router-link>
            </div>
        </div>

        <!-- 按钮 -->
        <div class="btn-box">
            <router-link class="btn" to="/add">新增收货地址</router-link>
        </div>
    </div>
</template>

<script>
import {mapState} from 'vuex'

export default {
    data(){
        return {
            /* addressList:[
                {
                    "id":1,
                    "address":"山西省太原市清徐县",
                    "phone":"1888888888",
                    "name":"闫天峰"
                },
                {
                    "id":2,
                    "address":"山西省太原市清徐县",
                    "phone":"1888888888",
                    "name":"闫天峰"
                },
                {
                    "id":3,
                    "address":"山西省太原市清徐县",
                    "phone":"1888888888",
                    "name":"闫天峰"
                }
            ] */
        }
    },
    computed:{
        ...mapState(['addressList'])
    }
}
</script>
<style scoped>
.address-page .list .item{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0;
    border-bottom: 1px solid #f0f0f0;
    margin: 0 20px;
}
.address-page .list .item .text{
    color: #888888;
}
.address-page .list .item .text .address{
    color: #333;
    font-weight: bold;
}

.btn-box{
    margin: 20px;
}
.btn-box .btn{
    display: block;
    text-decoration: none;
    line-height: 50px;
    text-align: center;
    background-color: lightskyblue;
    color: white;
}
</style>